<template>
	<a-layout-sider breakpoint="lg" v-model="collapsed">
		<div class="logo">
			<!-- <span>{{collapsed ? "听雨" : "※听雨※ 的个人博客"}}</span> -->
			<div v-if="collapsed">
				<img src="http://qfhv2h46f.hn-bkt.clouddn.com/tingyu.jpg" alt=""
					style="width: 48px;height: 48px;border-radius: 50%;">
			</div>
			<div v-else>
				<span>{{collapsed ? "听雨" : "※听雨※ 的个人博客"}}</span>
			</div>
		</div>

		<a-menu theme="dark" mode="inline" @click="goToPage">
			<a-menu-item key="index">
				<a-icon type="dashboard" /><span>仪表盘</span>
			</a-menu-item>
			<!-- 文章管理 -->
			<a-sub-menu>
				<span slot="title">
					<a-icon type="file" /><span>文章管理</span>
				</span>
				<a-menu-item key="addart">
					<a-icon type="form" /><span>写文章</span>
				</a-menu-item>
				<a-menu-item key="artlist">
					<a-icon type="snippets" /><span>文章列表</span>
				</a-menu-item>
			</a-sub-menu>
			<!-- 分类管理 -->
			<a-menu-item key="catelist">
				<a-icon type="unordered-list" /><span>分类列表</span>
			</a-menu-item>


			<!-- 用户列表 -->
			<a-menu-item key="userlist">
				<a-icon type="contacts" /><span>用户列表</span>
			</a-menu-item>
			<!-- 用户信息 -->
			<a-menu-item key="profile">
				<a-icon type="setting" /><span>个人设置</span>
			</a-menu-item>

		</a-menu>


	</a-layout-sider>
</template>

<script>
	export default {
		data() {
			return {
				collapsed: false,
			}
		},
		created() {

		},
		mounted() {

		},
		//方法集
		methods: {
			// 跳转到对应菜单
			goToPage(item) {
				this.$router.push('/' + item.key).catch((err) => err);
			}
		}
	}
</script>

<style scoped>
	.logo {
		height: 48px;
		margin: 16px;
		/* background-color: white; */
		color: #ffd04b;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}
</style>